<!-- 新拼团(ywm) 开团卡明细页面  -->
<template>
  <div id="ywmGroupsDetailed">
    <c-title :hide="false" text="开团卡明细"></c-title>
    <van-tabs v-model="active" @change="changeTab" sticky>
      <van-tab :title="tab.name" v-for="(tab, i) in dataList" :key="i">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div v-for="item in tab.list" :key="item" class="list">
              <van-row type="flex" justify="space-between">
                <van-col span="12" class="text-left">ID：{{ item.open_group_card_id }}</van-col>
                <van-col span="12" class="text-right " :class="Number(item.number)<0?'c-009a61':'c-ee0a24'">{{Number(item.number)>0?'+':''}}{{ item.number }}</van-col>
              </van-row>
              <van-row type="flex" justify="space-between">
                <van-col span="12" class="text-left s-10 c-999">{{ item.created_at }}</van-col>
                <van-col span="12" class="text-right s-10 c-666">{{ item.detail_type_text }}</van-col>
              </van-row>
            </div>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      dataList: [],
      loading: false,
      finished: false,
      refreshing: false
    };
  },

  created() {
    this.initTab();
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    initTab() {
      let arr = [
        {
          name: "全部",
          value: 0
        },
        {
          name: "发放",
          value: 1
        },
        {
          name: "使用",
          value: 2
        },
        {
          name: "退回",
          value: -1
        },
        {
          name: "过期",
          value: -2
        }
      ];
      this.dataList = [];
      arr.forEach((val, index) => {
        this.dataList.push({
          name: val.name,
          param: { detail_type: val.value },
          isLoadMore: true,
          page: 1,
          total_page: 0,
          list: []
        });
      });
    },
    getData() {
      // detail_type，1-发放，2-使用，-1 退回 -2 过期
      $http
        .get("plugin.ywm-fight-groups.frontend.controllers.open-card-detail.get-open-card-detail", { page: this.dataList[this.active].page, detail_type: this.dataList[this.active].param.detail_type })
        .then(response => {
          this.refreshing = false;
          this.loading = false;
          if (response.result === 1) {
            if (this.dataList[this.active].page == 1) {
              this.dataList[this.active].list = [];
            }
            this.dataList[this.active].list = this.dataList[this.active].list.concat(response.data.data);
            this.dataList[this.active].total_page = response.data.last_page;
            this.dataList[this.active].page = this.dataList[this.active].page + 1;
            if (response.data.current_page == response.data.last_page) {
              this.finished = true;
            }
          } else {
            this.$toast(response.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    changeTab() {
      if (this.dataList[this.active].list.length > 0) {
        return;
      }
      this.getData();
    },
    initData() {
      this.loading = true;
      this.finished = false;
      this.initTab();
    },
    onRefresh() {
      this.initData();
      this.getData();
    },
    onLoad() {
      this.getData();
    },
    toUrl(_name, _params = {}, _query = {}) {
      if (_name) this.$router.push(this.fun.getUrl(_name, _params, _query));
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#ywmGroupsDetailed {
  .list {
    padding: 0.625rem;
    background: #fff;
    border-radius: 0.5rem;

    .van-col {
      line-height: 1.375rem;
    }

    .text-left {
      text-align: left;
    }

    .text-right {
      text-align: right;
    }

    .s-10 {
      font-size: 10px;
    }

    .c-999 {
      color: #999;
    }

    .c-666 {
      color: #666;
    }

    .c-ee0a24 {
      color: #ee0a24;
    }

    .c-009a61 {
      color: #009a61;
    }
  }
}
</style>
